<template>
  <div>
    pageA's Child
    <!-- <input v-model="text" /> -->
    <!-- <input v-model="obj.text" /> -->
    <br />
    <br />
    1. Text(Not declared in data option):
    <br />
    <el-input v-model="notDeclaredText" style="width: 400px"></el-input>
    <!-- <el-select v-model="text" style="width: 400px">
      <el-option label="a" value="a"></el-option>
      <el-option label="b" value="b"></el-option>
      <el-option label="c" value="c"></el-option>
    </el-select> -->
    <br />
    <br />
    2. Text(Declared in data option):
    <br />
    <el-input v-model="text" style="width: 400px"></el-input>
    <!-- <el-select v-model="text" style="width: 400px">
      <el-option label="a" value="a"></el-option>
      <el-option label="b" value="b"></el-option>
      <el-option label="c" value="c"></el-option>
    </el-select> -->
    <br />
    <br />
    3. Modify a empty object's attribute:
    <br />
    <el-select v-model="emptyObject.text" style="width: 400px">
      <el-option label="a" value="a"></el-option>
      <el-option label="b" value="b"></el-option>
      <el-option label="c" value="c"></el-option>
    </el-select>
    <br />
    <br />
    4. Array operations:
    <br />
    <el-select v-model="obj.text" style="width: 400px">
      <el-option label="a" value="a"></el-option>
      <el-option label="b" value="b"></el-option>
      <el-option label="c" value="c"></el-option>
    </el-select>
    <br />
    <el-button @click="push">Push</el-button>
    <el-button @click="pop">Pop</el-button>
    <el-button @click="shift">Shift</el-button>
    <el-button @click="unshift">Unshift</el-button>
    <el-button @click="splice">Splice</el-button>
    <el-button @click="sort">Sort</el-button>
    <el-button @click="reverse">Reverse</el-button>
    <br />
    <el-button @click="del">Del</el-button>
    <el-button @click="fill">Fill</el-button>
    <el-button @click="copyWithin">CopyWithin</el-button>
    <el-button @click="setFirstEle">this.arr[0] = '100'</el-button>
    <div v-for="(item, index) in arr" :key="index">
      <!-- <el-input v-model="arr[index]"></el-input> -->
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: null,
      arr: [],
      text: '',
      obj: { text: '' },
      emptyObject: {}
      // obj: {}
    };
  },
  watch: {
    text(val, oldVal) {
      console.log('text changed: ', val, oldVal);
    }
  },
  beforeCreate() {
    console.log('PageAChild beforeCreate');
    throw new Error('PageAChild create error');
  },
  created() {
    console.log('PageAChild created');
  },
  beforeMount() {
    console.log('PageAChild beforeMount');
  },
  mounted() {
    console.log('PageAChild mounted');

    console.log('text: ', this.text);
    console.log('obj: ', this.obj);
    const that = this;
    setTimeout(() => {
      // debugger;
      // that.$set(that.emptyObject, 'text', 'a');
      // that.emptyObject = { text: 'a' };
      that.emptyObject.text = 'a';
      that.obj.text = 'a';
      // Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
      // that.$set(that, 'text', 'a');
      that.text = 'a';
      console.log('that: ', that);
    }, 1000);
  },
  activated() {
    console.log('PageAChild activated');
  },
  deactivated() {
    console.log('PageAChild deactivated');
  },
  beforeUpdate() {
    console.log('PageAChild beforeUpdate');
  },
  updated() {
    console.log('PageAChild updated');
  },
  beforeDestroy() {
    console.log('PageAChild beforeDestroy');
  },
  destroyed() {
    console.log('PageAChild destroyed');
  },
  methods: {
    setFirstEle() {
      this.arr[0] = '100';
      // this.$set(this.arr, 0, '100');
    },
    push() {
      // this.arr.push(this.text);
      this.arr.push(this.obj.text);
    },
    pop() {
      this.arr.pop();
    },
    shift() {
      this.arr.shift();
    },
    unshift() {
      // this.arr.unshift(this.text);
      this.arr.unshift(this.obj.text);
    },
    splice() {
      this.arr.splice(0, 1);
    },
    sort() {
      this.arr.sort();
    },
    reverse() {
      this.arr.reverse();
    },
    del() {
      delete this.arr[this.arr.length - 1];
      console.log('del this.arr: ', this.arr);
    },
    fill() {
      this.arr.fill(this.text, 0, this.arr.length);
      console.log('fill this.arr: ', this.arr);
    },
    copyWithin() {
      this.arr.copyWithin(this.arr.length - 1, 0, 1);
      console.log('copyWithin this.arr: ', this.arr);
    }
  }
};
</script>
